<template>
	<view class="index_video">
		<!-- 内容组件 -->
		<compShared :compData="videoData" v-if="videoData"></compShared>
		<!-- loading -->
		<compLoad :state = "status"></compLoad>
		<view id="touch_bottom"></view>
	</view>
</template>

<script>
	import compLoad from '../compLoad/compLoad.vue'
	import compShared from '../compShared/compShared.vue';
	export default {
		name:"indexVideo",
		data() {
			return {
				videoData:null,
				status: true,
				page: 0
			};
		},
		components: {
			compShared,
			compLoad
		},
		mounted() {
			let io = new IntersectionObserver(this.touchList, {});
			let viewList = document.getElementById('touch_bottom');
			io.observe(viewList);
		},
		created() {
			this.getData(0)
		},
		methods:{
			getData(k){
				this.status = true
				this.$axios(`home/videos/${k}/20`).then(res=>{
					console.log('视频--->',res.result.list);
					if(k == 0){
						this.videoData =res.result.list;
						this.status = false
					}else{
						this.videoData =this.videoData.concat(res.result.list);
						this.status = false
					}
					
				})
			},
			touchList(k) {
				if (this.status == false) {
					k = k[0];
					let isShow = k.isIntersecting;
					if (isShow) {
						let tempIndex = ++ this.page;
						console.log('this.page ++', tempIndex);
						this.getData(tempIndex)
					}
				}
			
			}
		}
	}
</script>

<style lang="scss">
.index_video{
	width: 100%;
	margin-top: 178rpx;
}
</style>
